<template>
	<div class="app-box">
		<router-view/>
		<footer class="kp-nav-footer" v-if="$route.meta.xtab">
			<ul>
				<li class="kp-nav-index" >
					<router-link to="/train">
						<span></span>
						<p>首页</p>
					</router-link>
				</li>
				<li class="kp-nav-order" >
					<router-link :to="{path:'/my/order',query:{order:'my'}}" >
						<span></span>
						<p>订单</p>
					</router-link>
				</li>
			</ul>
		</footer>
	</div>
</template>
<script>
	import { mapGetters, mapActions } from "vuex";
	export default {
		data() {
			return {
				path:'',
				pathNum:0,
			}
		},
		mounted() { //载入后执行
			this.path = this.$route.path;
		},
		created() { //创建后
    
		},
		watch: { //监听放置
			'$route':'xtab'
		},
		methods: { //方法放置
			xtab(){
//				console.log(this.$route.name)
				if(this.$route.name=='allOrder'){
					if(this.$route.query.order=='my'){
						this.$route.meta.xtab = true;
						this.$route.meta.xheader = false;
					}else if(this.$route.query.order=='order'){
						this.$route.meta.xtab = false;
						this.$route.meta.xheader = true;
					}
				}
			},
			index(){
				this.path = '/index';
				this.$router.push({
					path:'/'
				})
				
			},
			order(){
				this.path = '/my/order';
				this.$router.push({
					path:'/my/order',
					query:{
						'order':'my'
					}
				})
			},
			my(){
				this.path = '/my';
				this.$router.push({
					path:'/my'
				})
				
			},
		},
		computed: mapGetters([
			'ctitle',
			'isEvenOrOdd'
		]),
	}
</script>

<style scoped>
	.kp-nav-footer {
		position: fixed;
		bottom: 0;
		width: 750px;
		height: 98px;
		background: #fff;
		z-index: 999;
		box-shadow: 0px 0px 13px 7px rgba(202,202,202,0.29);
	}
	
	.kp-nav-footer ul {
		display: flex;
	}
	
	.kp-nav-footer ul li {
		flex: 1;
		display: block;
		padding-top: 14px;
		height: 98px;
	}
	
	.kp-nav-footer ul li span {
		width: 44px;
		height: 44px;
		display: block;
		margin: 0 auto;
	}
	
	.kp-nav-footer ul li p {
		margin-top: 10px;
		font-size: 24px;
		text-align: center;
		font-family: "PingFang-SC-Medium";
		color: #333;
	}
	
	.kp-nav-footer ul li a {
		display: block;
		height: 98px;
	}
	
	.kp-nav-footer ul li:nth-child(1) span {
		background: url(../assets/nav-tab-1.png) no-repeat center center;
		background-size: 44px 44px;
	}
	
	.kp-nav-footer ul li:nth-child(2) span {
		background: url(../assets/nav-tab-2.png) no-repeat center center;
		background-size: 44px 44px;
	}
	
	.kp-nav-footer ul li:nth-child(3) span {
		background: url(../assets/nav-tab-3.png) no-repeat center center;
		background-size: 44px 44px;
	}
	
	.kp-nav-footer ul li:nth-child(4) span {
		background: url(../assets/nav-tab-4.png) no-repeat center center;
		background-size: 44px 44px;
	}
	
	.kp-nav-footer ul li:nth-child(5) span {
		background: url(../assets/nav-tab-4.png) no-repeat center center;
		background-size: 44px 44px;
	}
	/*底部切换字体颜色*/
	.kp-nav-footer ul li a.router-link-exact-active p{
		color:#6cdcd4;
	}
	.kp-nav-footer ul li.kp-nav-index span{
		background: url(../assets/shouye@2x.png) no-repeat center center;
		background-size: 44px 44px;
	}
	.kp-nav-footer ul li.kp-nav-index a.router-link-exact-active span{
		background: url(../assets/shouye_1@2x.png) no-repeat center center;
		background-size: 44px 44px;
	}
	.kp-nav-footer ul li.kp-nav-order span{
		background: url(../assets/dingdan@2x.png) no-repeat center center;
		background-size: 44px 44px;
	}
	.kp-nav-footer ul li.kp-nav-order a.router-link-exact-active span{
		background: url(../assets/dingdan_1@2x.png) no-repeat center center;
		background-size: 44px 44px;
	}
	.kp-nav-footer ul li.kp-nav-my span{
		background: url(../assets/wode@2x.png) no-repeat center center;
		background-size: 44px 44px;
	}
	.kp-nav-footer ul li.kp-nav-my a.router-link-exact-active span{
		background: url(../assets/wode_1@2x.png) no-repeat center center;
		background-size: 44px 44px;
	}

	
</style>